<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="80px" class="search-form">
      <el-form-item label="类型" prop="type">
        <el-select v-model="queryParams.type" placeholder="请选择湖库类型" clearable>
          <el-option v-for="(item, index) in reservoirType" :key="index" :label="item.title" :value="item.key" />
        </el-select>
      </el-form-item>

      <el-form-item label="工程规模" prop="projectScale">
        <el-select v-model="queryParams.projectScale" placeholder="请选择工程规模" clearable>
          <el-option v-for="(item, index) in genreList" :key="index" :label="item.title" :value="item.key" />
        </el-select>
      </el-form-item>
      <el-form-item label="名称" prop="name">
        <el-input v-model="queryParams.name" placeholder="请输入湖库名称" clearable />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="search" @click="handleQuery" style="margin-left: 20px">搜索
        </el-button>
        <el-button @click="test">重置</el-button>
      </el-form-item>
    </el-form>

    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button type="primary" plain icon="plus" @click="handleAdd" v-hasPermi="['base:reservoir:add']">新增
        </el-button>
      </el-col>
      <right-toolbar v-model:showSearch="showSearch" @queryTable="fetchList"></right-toolbar>
    </el-row>

    <el-table v-loading="loading" :data="reservoirList" border>
      <el-table-column label="序号" align="center" type="index" :index="(index) => { return (index+1+(queryParams.pageNum-1)*queryParams.pageSize) }" />
      <el-table-column label="名称" align="center" prop="name" width="120" />
      <el-table-column label="别名" align="center" prop="alias" width="120" />
      <el-table-column label="编码" align="center" prop="code" width="160" />
      <el-table-column label="所属流域" align="center" prop="riverName" />
      <el-table-column label="州市" align="center" prop="cityName" />
      <el-table-column label="区县" align="center" prop="districtName" />
      <el-table-column label="工程规模" align="center" prop="projectScale">

        <template #default="scope">
          {{getDictTitle(genreList,scope.row.projectScale)}}
        </template>
      </el-table-column>

      <el-table-column label="面积(km²)" align="center" prop="area" />
      <el-table-column label="平均水深(m)" align="center" prop="depthAvg" width="100" />
      <el-table-column label="容量(m³)" align="center" prop="capacity" />
      <el-table-column label="多年平均降雨量(mm)" align="center" width="120" prop="rainfall" />
      <el-table-column label="修改时间" align="center" prop="updateTime" width="140" />
      <el-table-column label="操作" align="center" fixed="right" class-name="small-padding fixed-width" width="170">
        <template #default="scope">
          <el-button type="primary" text icon="view" @click="handleView(scope.row)">查看</el-button>
          <el-button type="primary" text icon="edit" @click="handleUpdate(scope.row)">修改</el-button>
          <el-button type="primary" text icon="delete" @click="handleDelete(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize" @pagination="fetchList" />

  </div>
</template>

<script  setup  name="Reservoir">
import { listReservoir, removeReservoir } from "@/api/base/reservoir";
import { getDictTitle } from "@/utils/biz";
import { listRegionByUser } from "@/api/base/region";
import staticRouter from "@/router/static";
import { listRiver } from "@/api/base/river";
const { proxy } = getCurrentInstance();

const loading = ref(true); // 遮罩层
const showSearch = ref(true);

const queryParams = ref({
  pageNum: 1,
  pageSize: 10,
  projectScale: undefined,
  name: undefined,
});
const total = ref(0);

const initDataRiverOptions = ref([]); // 河流树选项
const reservoirType = ref([]); // 湖库类型
const genreList = ref([]); //水库规模
const regionTreeList = ref([]); // 行政区划树形列表
const reservoirList = ref([]);
const regionId = ref(undefined);

/** 查询湖库列表 */
function fetchList() {
  loading.value = true;
  let list = [];
  listReservoir(queryParams.value)
    .then((response) => {
      response.rows.forEach((item) => {
        item.projectScale = parseInt(item.projectScale);
        list.push(item);
      });
      reservoirList.value = list;
      total.value = response.total;
    })
    .finally(() => {
      loading.value = false;
    });
}

/** 搜索按钮操作 */
function handleQuery() {
  queryParams.value.pageNum = 1;
  fetchList();
}

/** 重置按钮操作 */
function resetQuery() {
  proxy.resetForm("queryForm");
  regionId.value = undefined;
  handleQuery();
}

/** 新增按钮操作 */
function handleAdd() {
  proxy.$router.push({
    path: staticRouter.reservoirEdit,
    query: {
      type: 1,
    },
  });
}
/** 查看按钮操作 */
function handleView(row) {
  const id = row.id;
  proxy.$router.push({
    path: staticRouter.reservoirEdit,
    query: {
      id: id,
      type: 3,
    },
  });
}

/** 修改按钮操作 */
function handleUpdate(row) {
  const id = row.id;
  proxy.$router.push({
    path: staticRouter.reservoirEdit,
    query: {
      id: id,
      type: 2,
    },
  });
}

/** 删除按钮操作 */
function handleDelete(row) {
  const ids = row.id;
  $confirm('是否确认删除湖库编"' + row.name + '"的数据项?', "警告", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  })
    .then(() => {
      loading.value = true;
      return removeReservoir(ids);
    })
    .then(() => {
      fetchList();
      $msgSuccess("删除成功");
    })
    .catch(() => {})
    .finally(() => {
      loading.value = false;
    });
}

/** 转换河流数据结构 */
function normalizer(node) {
  if (node.children && !node.children.length) {
    delete node.children;
  }
  return {
    id: node.id,
    label: node.name,
    children: node.children,
  };
}

function test() {
  let arr = [{ num: 1 }, { num2: 2 }, { num3: 3 }];

  // let obj = { numtotal: 0 };

  // arr.reduce(function (prev, cur, index) {
  //   obj.numtotal += cur["num" + (index == 0 ? "" : String(index + 1))];
  // }, 0);

  let a = eval(Object.values(Object.assign({}, ...arr)).join("+"));

  console.log(a);
}

fetchList();
</script>
<style scoped="scoped" lang="scss">
:deep(.el-dialog__body) {
  padding-top: 5px;
}

:deep(.textLineFeed > label) {
  line-height: 15px !important;
}

:deep(.el-col-style) {
  width: 350px;
}

:deep(.el-col-style-1) {
  width: 200px;
  margin-bottom: 0 !important;
}

:deep(.el-col-style-1 > label) {
  width: 100% !important;
  clear: both;
  text-align: center;
}

:deep(.el-col-style-1 > div) {
  display: none !important;
}

.factorTable {
  margin-bottom: 20px;
}

.factorTable td {
  padding: 0 10px;
  width: 200px;
}

fieldset {
  padding-top: 20px;
  border-top: solid #ebeef5;
  border-left: none;
  border-right: none;
  border-bottom: none;
}

fieldset legend {
  margin-left: -8px;
  color: #409eff;
}

.vue-treeselect {
  width: 190px;
}

.infoStyle .el-textarea {
  width: 800px;
}

.remarkStyle .el-textarea {
  width: 800px;
}
</style>
